<template> <div class="page-container">
  <div class="toolbar">
     <el-row>
      <el-tabs type="border-card">
       <el-tab-pane label="基本信息">
       <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm" :rules="dataFormRules" class="form">
       <el-row style="margin-top: -20px;">
       <el-divider content-position="center">
        <span style="font-size:16px;font-weight:800">基本信息</span>
       </el-divider>

       <el-form-item label="">
        <el-input v-model="dataForm.id" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="仓库流水编码">
        <el-input v-model="dataForm.flowing_code" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="仓库编码">
        <el-input v-model="dataForm.warehouse_code" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="仓库名称">
        <el-input v-model="dataForm.warehouse_name" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="商品编码">
        <el-input v-model="dataForm.product_code" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="商品名称">
        <el-input v-model="dataForm.product_name" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="商品计量单位">
        <el-input v-model="dataForm.product_unit_id" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="商品计量单位名称">
        <el-input v-model="dataForm.product_unit_name" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="商品数量">
        <el-input v-model="dataForm.product_count" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="单据来源类型">
        <el-input v-model="dataForm.source_type" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="单据来源类型名称">
        <el-input v-model="dataForm.source_type_name" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="单据编号">
        <el-input v-model="dataForm.documents_number" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="备注">
        <el-input v-model="dataForm.remark" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="运营方ID">
        <el-input v-model="dataForm.dept_id" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="商家ID">
        <el-input v-model="dataForm.merchant_id" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="商家名称">
        <el-input v-model="dataForm.merchant_name" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="店铺Id">
        <el-input v-model="dataForm.store_id" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="店铺名称">
        <el-input v-model="dataForm.store_name" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="创建时间">
        <el-input v-model="dataForm.create_time" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="创建人">
        <el-input v-model="dataForm.creator" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="修改时间">
        <el-input v-model="dataForm.update_time" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="修改人">
        <el-input v-model="dataForm.updator" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="1 标识已删除 0 标识未删除">
        <el-input v-model="dataForm.delete_flag" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="创建人名称">
        <el-input v-model="dataForm.creator_name" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="更新名称">
        <el-input v-model="dataForm.updator_name" placeholder="请输入"></el-input>
       </el-form-item>
      <!--<!--//模板-->
      <!--<!--//1.下拉框模板(需要定义 demoOptions 集合 )-->
      <!--<el-form-item label="教育性质" align="left">-->
      <!-- <el-select v-model="dataForm.natureEducation" placeholder="普通高等教育" :disabled="isShow">-->
      <!--   <el-option   v-for="item in demoOptions"   :key="item.value" :label="item.label"  :value="item.value"></el-option>-->
      <!-- </el-select>-->
      <!--</el-form-item>-->
     <!-- <!--//营业执照-->
     <!--<el-form-item label="营业执照" align="left" :disabled="isShow" v-if="dataForm.institutionCodeImgUrl">-->
     <!-- <div style="width: 880px;">-->
     <!--   <img :src="dataForm.institutionCodeImgUrl" style="width: 100px;height: 100px;"/>-->
     <!-- </div>-->
     <!--</el-form-item>-->
       </el-row>
      </el-form>
     </el-tab-pane>
    </el-tabs>
   </el-row>
  </div>
 </div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable'; 
import {mapState} from "vuex"; 
import ThemePicker from "@/components/ThemePicker"; 
import LangSelector from "@/components/LangSelector"; 
import VDistpicker from 'v-distpicker'; 
import elTree from '@/views/tree/src/tree.vue' 

//二.数据输出区
export default {

//2.1 注册组件
components: {
 jicTable,
 ThemePicker,
 LangSelector,
 VDistpicker,
 elTree,
},

//2.2 数据初始化区
data() {
 return {

  //2.2.1 公共数据初始化
  searchSize: 'mini',

// 2.2.2 form 表单数据初始化 
  dataForm: {
   id:null, 
   flowing_code:null, 
   warehouse_code:null, 
   warehouse_name:null, 
   product_code:null, 
   product_name:null, 
   product_unit_id:null, 
   product_unit_name:null, 
   product_count:null, 
   source_type:null, 
   source_type_name:null, 
   documents_number:null, 
   remark:null, 
   dept_id:null, 
   merchant_id:null, 
   merchant_name:null, 
   store_id:null, 
   store_name:null, 
   create_time:null, 
   creator:null, 
   update_time:null, 
   updator:null, 
   delete_flag:null, 
   creator_name:null, 
   updator_name:null, 
},
//trigger 为blur 表示丢失焦点;为change 表示值发生变化;
  dataFormRules: {
   id:[ 
   { required: true, message: "请输入", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   flowing_code:[ 
   { required: true, message: "请输入仓库流水编码", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   warehouse_code:[ 
   { required: true, message: "请输入仓库编码", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   warehouse_name:[ 
   { required: true, message: "请输入仓库名称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   product_code:[ 
   { required: true, message: "请输入商品编码", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   product_name:[ 
   { required: true, message: "请输入商品名称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   product_unit_id:[ 
   { required: true, message: "请输入商品计量单位", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   product_unit_name:[ 
   { required: true, message: "请输入商品计量单位名称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   product_count:[ 
   { required: true, message: "请输入商品数量", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   source_type:[ 
   { required: true, message: "请输入单据来源类型", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   source_type_name:[ 
   { required: true, message: "请输入单据来源类型名称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   documents_number:[ 
   { required: true, message: "请输入单据编号", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   remark:[ 
   { required: true, message: "请输入备注", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   dept_id:[ 
   { required: true, message: "请输入运营方ID", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   merchant_id:[ 
   { required: true, message: "请输入商家ID", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   merchant_name:[ 
   { required: true, message: "请输入商家名称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   store_id:[ 
   { required: true, message: "请输入店铺Id", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   store_name:[ 
   { required: true, message: "请输入店铺名称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   create_time:[ 
   { required: true, message: "请输入创建时间", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   creator:[ 
   { required: true, message: "请输入创建人", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   update_time:[ 
   { required: true, message: "请输入修改时间", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   updator:[ 
   { required: true, message: "请输入修改人", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   delete_flag:[ 
   { required: true, message: "请输入1 标识已删除 0 标识未删除", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   creator_name:[ 
   { required: true, message: "请输入创建人名称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   updator_name:[ 
   { required: true, message: "请输入更新名称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
},
   //dialogVisible: false, //// 是否显示弹窗内容;
   //editDialogVisible1: false,//// 是否可编辑弹窗内容;
   //editLoading: false,////是否显示加载时动画效果;





   }//return 完结;
  },//data()方法 完结;

//2.3 Vue 方法区
methods: {
//2.3.1 公共方法区

//1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
mounted() {
 this.getDetail();
},

//2.请求列表数据
getDetail() {
 let this_ = this;
 if (this_.id != null && this.id != "undefined") {
  let params = {};
  params.id = this_.id;
  this.utils.request.getMWarehouseFlowingDetail(params, function (res) {
  if (res.code === "0000") {
   this_.dataForm = res.data.data;
  } else {
   this_.$message({message: "操作失败, " + data.msg, type: "error"});
   }
  });
 }
},

// 3.重置搜索框条件
resetForm(formName) {
 this.searchFilters = {
 };
 this.findPage(null);
},

// 4.详情按钮对应的方法(TODO 需要修改路径)
handleDetail(params) {
 this.$router.push({path: "/SchoolDetail/" + params.row.id});
},

// 7.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 8.关闭弹窗
handleClose() {
this.dialogVisible = false;
},

/*图片预览*/
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
/*图片移除*/
handleRemove(file, fileList) {
console.log(file, fileList);
},
//==========2.3.1 JavaScript 自定义方法区==========





},
}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
